import { makeStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
import React,{useReducer} from 'react';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
import {connect} from "react-redux"
import {changeaAction,addAction,computeAction} from "./action"
import {reducer2,defaultstate2} from "./reducer"
const useStyles = makeStyles((theme) => ({
  root: {
    '& > *': {
      margin: theme.spacing(1),
    },
  },
}));

const ShowComponent=(props)=>{
  return (
    <div className={props.classes.root}>
    <Button variant="contained" color="primary" 
    onClick={()=>props.dispatch(computeAction(props.list))}>
    Submit
    </Button>
    <div>
    <List>
      { props.state.list.map(
        (value,index)=>{
        return (<ListItem key={index}>
          <ListItemText primary={value} />
        </ListItem>)}
)}
      </List>
    </div>

  </div>
  )
}

 function ToDoList(props) {
  const classes = useStyles();
  const [state,dispatch] = useReducer(reducer2,defaultstate2)


  return (
    <>
    <div className={classes.root}>
      <TextField
      id="outlined-number" label="Number" value={props.value}
      onChange={props.handleChange} type="number"
      />
      <Button variant="contained" color="primary" 
      onClick={props.handleClick}>
      Submit
      </Button>
      <div>
      <List >
        { props.list.map(
          (value,index)=>{
          return (<ListItem key={index}>
            <ListItemText primary={value} />
          </ListItem>)}
  )}
        </List>
      </div>

    </div>
    <div>
      <ShowComponent classes={classes} dispatch={dispatch} list={props.list} state={state}/>
    </div>
    </>

    

    
  );



}
const mapStateToProps=state=>{
  return {
    count:state.value,
    list:state.list
  }
}
const mapDispatchToProps=dispatch=>{
   return {
    handleChange(e) {
    dispatch(changeaAction(e));
  },

   handleClick() {
    dispatch(addAction);
  }
}
}
export default connect(mapStateToProps,mapDispatchToProps)(ToDoList)